import React, { useEffect, useState } from 'react'
import { fileInfo } from '~/types'
import { formatFileSize } from '~/util/formatFileSize'
import VideoIcon from '~/assets/mp4.png'
import AudioIcon from '~/assets/mp3.png'
import FolderIcon from '~/assets/folder.png'
import NoneIcon from '~/assets/none.png'
import JsonIcon from '~/assets/json.png'
import WordIcon from '~/assets/word.png'
import ExcelIcon from '~/assets/excel.png'
import PptIcon from '~/assets/ppt.png'
import PreviewModal from '../PreviewModal'
import { useStoreDispatch, useStoreSelector } from '~/store'
import { setBreadcrumbs, setFileInfo } from '~/store/features/fileSlice'
import { Radio, Table, TableColumnsType } from 'antd'
import useIsMobile from '~/hooks/useIsMobile'

interface Props {
  files: fileInfo[]
}
const renderDocument = (file: fileInfo) => {
  if (file.type) {
    switch (file.type) {
      case 'word':
        return (
          <img
            className='mr-7 ml-2'
            style={{ width: '30px' }}
            src={WordIcon}
            alt=''
          />
        )
      case 'excel':
        return (
          <img
            className='mr-7 ml-2'
            style={{ width: '30px' }}
            src={ExcelIcon}
            alt=''
          />
        )
      case 'ppt':
        return (
          <img
            className='mr-7 ml-2'
            style={{ width: '30px' }}
            src={PptIcon}
            alt=''
          />
        )
      case 'json':
        return (
          <img
            className='mr-7 ml-2'
            style={{ width: '30px' }}
            src={JsonIcon}
            alt=''
          />
        )
      default:
        return (
          <img
            className='mr-7 ml-2'
            style={{ width: '30px' }}
            src={NoneIcon}
            alt=''
          />
        )
    }
  }
  return null
}
const renderFile = (file: fileInfo) => {
  switch (file.fileType) {
    case 'image':
      return (
        <img className='mr-5' style={{ width: '50px' }} src={file.url} alt='' />
      )
    case 'document':
      return renderDocument(file)
    case 'video':
      return (
        <video
          className='mr-7 ml-2'
          style={{ width: '100px' }}
          src={file.url}
        ></video>
      )
    case 'audio':
      return (
        <img
          className='mr-7 ml-2'
          style={{ width: '30px' }}
          src={AudioIcon}
          alt=''
        />
      )
    case 'folder':
      return (
        <img
          className='mr-7 ml-2'
          style={{ width: '30px' }}
          src={FolderIcon}
          alt=''
        />
      )
    default:
      return (
        <img
          className='mr-7 ml-2'
          style={{ width: '30px' }}
          src={NoneIcon}
          alt=''
        />
      )
  }
}
const columns: TableColumnsType<fileInfo> = [
  {
    title: '文件预览',
    render: (value, record) => (
      <div className='mr-5 text-slate-400'>{renderFile(record)}</div>
    )
  },
  {
    title: '文件名称',
    dataIndex: 'name'
  },
  {
    title: '文件大小',
    dataIndex: 'size',
    render: (size) =>
      size ? (
        <div className='mr-5 text-slate-400'>{formatFileSize(size)}</div>
      ) : (
        ''
      )
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    render: (createTime) => (
      <div>{createTime.replace(/T|\.(\d+)Z/g, ' ').trim()}</div>
    )
  }
]
const MobileColumns: TableColumnsType<fileInfo> = [
  {
    title: '文件预览',
    width: '150px',
    render: (value, record) => (
      <div className='mr-5 text-slate-400'>{renderFile(record)}</div>
    )
  },
  {
    title: '文件名称',
    dataIndex: 'name'
  }
]
const FileRenderer: React.FC<Props> = ({ files }) => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [selectedFile, setSelectedFile] = useState<fileInfo | null>(null)
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const dispatch = useStoreDispatch()
  const isMobile = useIsMobile()
  const { folder, breadcrumbs } = useStoreSelector((state) => state.file)

  useEffect(() => {
    console.log('1112', 1112)
    return setSelectedRowKeys([])
  }, [files])

  const openModal = (file: fileInfo) => {
    setSelectedFile(file)
    setIsModalOpen(true)
  }

  const closeModal = () => {
    setIsModalOpen(false)
    setSelectedFile(null)
  }
  // 定义处理不同文件类型的方法
  const handleFileClick = (file: fileInfo) => {
    if (file.fileType === 'folder') {
      // 更新redux的filePath
      dispatch(
        setFileInfo({
          ...folder,
          folderId: file.id
        })
      )
      dispatch(
        setBreadcrumbs([
          ...breadcrumbs,
          {
            name: file.name,
            id: file.id
          }
        ])
      )
    } else {
      openModal(file)
    }
  }
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys)
    files.forEach((file) => {
      file.isCheck = false
      if (newSelectedRowKeys.includes(file.id)) {
        file.isCheck = true
      }
    })
    console.log('selectedRowKeys changed: ', files)
  }
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange
  }
  return (
    <div
      style={{
        height: 'calc(100% - 55px)'
      }}
    >
      <Table
        rowSelection={rowSelection}
        columns={isMobile ? MobileColumns : columns}
        dataSource={files}
        rowKey='id'
        pagination={false}
        scroll={{ y: 'calc(100vh - 210px)' }}
        onRow={(record) => ({
          onClick: () => handleFileClick(record) // 为行添加点击事件
        })}
      />
      <PreviewModal
        file={selectedFile}
        isOpen={isModalOpen}
        onClose={closeModal}
      />
    </div>
  )
}

export default FileRenderer
